import React,{Component} from 'react'
import {Layout,Tabs} from 'antd'
import EditMenu from '../EditMenu'
import classNames from 'classnames/bind'
import styles from './editSider.scss'

const {Sider}=Layout;
const {TabPane}=Tabs;
let cx = classNames.bind(styles);


class EditSider extends Component{
  constructor(props){
    super(props)
    this.state={data:props.data}
  }
  componentWillReceiveProps(nextprops){
    this.setState({data:nextprops.data})
  }
  render(){
    const {data}=this.state
    return (
      <Sider width={200} style={{ background: '#fff' }} breakpoint="lg"
      collapsedWidth="0">
          <Tabs defaultActiveKey="tab0">
          {
                data.map((item,index)=>{
                  return (
                    <TabPane tab={item.tabTitle} key={'tab'+index}>
                      <EditMenu data={item.menu}/>
                    </TabPane>)
            })
            } 
            </Tabs>
      </Sider>)
  }
}
export default EditSider;
